<template lang="pug">
  v-form(direction="vertical" style="width:400px")
    v-form-item(label="选择系统" prop="region")
      v-select(v-model="formData.system_key" placeholder="请选择系统" notfound="无法找到" :data="systemlist" @change="getSystemPermissions")
    v-form-item(label="父级菜单" prop="region")
      v-select(v-model="formData.parent_id" placeholder="父级菜单" notfound="无法找到" :data="permissionlist")
    v-form-item(label="菜单名称")
      v-input(type="text" placeholder="菜单名称" size="large" v-model="formData.permission_name")
    v-form-item(label="菜单描述")
      v-input(type="textarea" placeholder="菜单描述" size="large" v-model="formData.remark")
    v-form-item(label="路由名称")
      v-input(type="text" placeholder="路由名称" size="large" v-model="formData.route_name")
    v-form-item(label="菜单图标")
      v-input(type="text" placeholder="菜单图标" size="large" v-model="formData.icon")
    v-form-item(label="排序")
      v-input(type="text" placeholder="排序" size="large" v-model="formData.sort")
    v-form-item(style="margin-top:24px")
      v-button( type="primary" html-type="button" @click="submitForm") 确定
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'permissions-create',
  data () {
    return {
      systemlist: [],
      permissionlist: [],
      formData: {
        parent_id: '',
        system_key: '',
        permission_name: '',
        route_name: '',
        icon: '',
        sort: '',
        remark: ''
      }
    }
  },
  mounted () {
    this.getSystems()
  },
  computed: {
    ...mapGetters([
      'systems'
    ])
  },
  methods: {
    getSystems () {
      if (this.systems) {
        let systemlist = []
        this.systems.forEach(system => {
          systemlist.push({
            value: system.system_key,
            label: system.system_name
          })
        }, this)
        this.systemlist = systemlist
      } else {
        this.$http.get('rbac/system?pageSize=1000').then(res => {
          let data = res.data
          let systemlist = []
          data.result.forEach(system => {
            systemlist.push({
              value: system.system_key,
              label: system.system_name
            })
          }, this)
          this.$store.dispatch('setSystemData', data.result)
          this.systemlist = systemlist
        })
      }
    },
    getSystemPermissions (systemkey) {
      this.$http.get(`rbac/system/permissions/${systemkey}`).then(res => {
        let data = res.data
        let permissionlist = [{label: '|-顶级菜单', value: 0}]
        permissionlist = permissionlist.concat(data)
        this.permissionlist = permissionlist
      })
    },
    submitForm () {
      this.$http.post('rbac/permission', this.formData)
        .then(res => {
          let result = res.data
          if (result.ret === 0) {
            this.$message.info(result.msg)
            this.formData = {
              parent_id: '',
              system_key: '',
              permission_name: '',
              route_name: '',
              icon: '',
              sort: '',
              remark: ''
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
